<template>
    <div class="insure">
        <x-header v-show="!isWeChar">
            <div slot="default" class="common__header--title">投保信息</div>
            <div @click="goBack" slot="overwrite-left"><img slot="icon" src="~assets/x3/ico/goback1.png" class="go-back"></div>
        </x-header>
        <transition name="fade">
            <group class="insure__formPolicy--group" v-show="allpiShow">
                <cell>
                    <span class="insure__list--title" slot="after-title">
                        <span class="insure__iconspan"></span>
                        <span class="insure__iconspan--title ">投保人信息</span>
                    </span>
                </cell>

                <div class="weui-cell vux-cell-form-preview">
                    <div class="weui-form-preview__bd">
                        <div class="weui-form-preview__item">
                            <label class="weui-form-preview__label base_color">投保人</label>
                            <span class="weui-form-preview__value base_color">
                                {{axtx.appliDto.name}}
                            </span>
                        </div>
                        <div class="weui-form-preview__item">
                            <label class="weui-form-preview__label base_color">证件号码</label>
                            <span class="weui-form-preview__value base_color">
                                {{axtx.appliDto.idNum}}
                            </span>
                        </div>
                        <div class="weui-form-preview__item">
                            <label class="weui-form-preview__label base_color">手机号码</label>
                            <span class="weui-form-preview__value base_color">
                                {{axtx.appliDto.phoneNum}}
                            </span>
                        </div>
                        <div class="weui-form-preview__item">
                            <label class="weui-form-preview__label base_color">电子邮件</label>
                            <span class="weui-form-preview__value base_color">
                                {{axtx.appliDto.mailAddress}}
                            </span>
                        </div>
                        <div class="weui-form-preview__item">
                            <label class="weui-form-preview__label base_color">车牌号</label>
                            <span class="weui-form-preview__value base_color">
                                {{axtx.appliDto.carLicenseNum}}
                            </span>
                        </div>
                        <div class="weui-form-preview__item">
                            <label class="weui-form-preview__label base_color">车架号</label>
                            <span class="weui-form-preview__value base_color">
                                {{axtx.appliDto.carFrameNum}}
                            </span>
                        </div>
                    </div>
                </div>
            </group>
        </transition>
        <transition name="fade">
            <group class="insure__formPolicy--group" v-show="detailShow">
                <cell>
                    <span class="insure__list--title" slot="after-title">
                        <span class="insure__iconspan"></span>
                        <span class="insure__iconspan--title ">保单详情</span>
                    </span>
                </cell>

                <div class="weui-cell vux-cell-form-preview">
                    <div class="weui-form-preview__bd">
                        <div class="weui-form-preview__item">
                            <label class="weui-form-preview__label base_color">起保日期</label>
                            <span class="weui-form-preview__value base_color">
                                {{axtx.appliDto.stringDate}}
                            </span>
                        </div>
                        <div class="weui-form-preview__item">
                            <label class="weui-form-preview__label base_color">结束日期</label>
                            <span class="weui-form-preview__value base_color">
                                {{axtx.appliDto.endTime}}
                            </span>
                        </div>
                    </div>
                </div>
            </group>
        </transition>
        <div style="margin-bottom: 55px;"></div>

        <div class="insure__footer">
            <div class="insure__leftbtn">¥
                <span>{{insureResDataAxtx.curprice}}</span>
            </div>
            <div @click="pay" class="insure__rightbtn" :style="payStyleAxtx">{{stateAxtx}}</div>
        </div>
        <!-- 支付 -->
        <pay-com></pay-com>

    </div>
</template>

<script>

import PayCom from "src/components/PayCom";
import { RequestUrl } from "src/common/url";
import Config from "src/common/config/insureConfig";
import {
    Mutations,
    policyHolderType,
    Gender,
    PerIdentifyType,
    EntIdentifyType,
    benefType,
    insuredidentity,

    RouteUrl
} from "src/common/const";
import {
    XHeader,
    Group,
    Cell,
    XInput,
    Datetime,
    XSwitch,
    Selector,
    XButton,
    XDialog,
    CellFormPreview
} from "vux";
import Validation from "src/common/util/validation";
import DateUtil from "src/common/util/dateUtil";
import { mapState, mapActions } from "vuex";
export default {
    components: {
        CellFormPreview,
        XDialog,
        PayCom,
        Selector,
        XHeader,
        Group,
        Cell,
        XInput,
        Datetime,
        XSwitch,
        XButton
    },
    computed: mapState({
        loadingAxtx: "loadingAxtx",
        loading: "loading",
        stateAxtx: "stateAxtx",
        payStyleAxtx: "payStyleAxtx",
        user: "user",
        insureResDataAxtx: "insureResDataAxtx",
        seleCountry: "seleCountry",

        saveInsure: "saveInsure",
        detailsStore: "detailsStore",
        isWeChar: "isWeChar",
        axtx: "axtx"
    }),
    watch: {
        // insureResDataAxtx(cur, old) {
        //     this.pay(cur.res);
        // },
    },
    // filters: {
    //     buildStructure(val) {
    //         return Config.getHouseTypeValue(val);
    //     },
    //     getInsuredidentity(val) {
    //         return Config.getRelTypeName(val);
    //     }
    // },
    data() {
        return {
            allpiShow: false,
            detailShow: false,
        };
    },
    methods: {
        pay() {
            let res = this.insureResDataAxtx.res;
            let isAlert = false;
            let alertData = "";
            if (this.loadingAxtx) {
                if (res.result.status == true) {
                    // let responseJson = JSON.parse(res.result.responseJson);
                    // if (responseJson.success == "true") {
                    let payData = {
                        _this: this,
                        paymentNo: res.result.proposalSaveResponseDto.bussNewNo,
                        riskCode: this.detailsStore.curNsSelePlan.proCode
                    };
                    this.$common.storeCommit(this, Mutations.PAY_SET_DATA, payData);
                    // } else {
                    //     isAlert = true;
                    //     alertData = responseJson.message;
                    // }
                } else {
                    isAlert = true;
                    // alertData = res.result;
                    alertData = "投保失败，请稍后再试！";
                }
            }
            // else {
            //     isAlert = true;
            //     alertData = res.result;
            // }

            if (isAlert) {
                // alertData = "投保失败，请稍后再试！";
                this.$vux.alert.show({
                    content: this.$common.alertMsg(alertData, "red;")
                });
            }
        },
        goBack() {
            this.$common.goBack(this);
        }
    },
    beforeRouteEnter(to, from, next) {
        sessionStorage["CAR_FORM_URL"] = from.path;
        next();
    },
    beforeMount() {
    },
    mounted() {
        if (sessionStorage["CAR_FORM_URL"] == "/") {
            this.$common.goUrl(this, RouteUrl.CAR_INSURE);
            return;
        }
        // let test = this.insureResDataAxtx;

        document.title = '投保信息';
        let _this = this;

        this.allpiShow = true;
        setTimeout(function () {
            _this.detailShow = true;
        }, 1000);
        this.$init.subPageInit(this);
    }
};
</script>

<style scoped  lang="scss">
.base_color {
  color: #414244 !important;
}

.radio-check {
  label {
    vertical-align: middle;
  }
}

.common__clause {
  margin-bottom: 50px;
}

.insure__iconspan {
  position: absolute;
  margin-top: 4px;
  width: 4px;
  height: 18px;
  background-color: #c8161d;
}

.insure__list--title {
  font-size: 15px;
  color: #c8161d;
}

.insure__iconspan--title {
  margin-left: 9px;
  font-size: 14px;
}

.insure__formPolicy {
  border: 1px solid #e7e7e7;
  margin: 0 18px;
}

// .insure__formPolicy--group {
//     .vux-no-group-title {
//         padding-bottom: 20px;
//     }
// }
.insure__footer {
  position: fixed;
  bottom: 0px;
  z-index: 5;
  width: 100%;
  height: 47px;
  background-color: white;
  div {
    height: 100%;
    line-height: 47px;
    text-align: center;
    font-size: 20px;
  }
  box-shadow: 0px 0px 10px 1px #efefef;
}

.insure__leftbtn {
  float: left;
  width: 35%;
  background: #fff;
  color: #c8161d;
  span {
    color: #f6690a;
  }
}

.insure__rightbtn {
  background: #c8161d;
  color: #fff;
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s;
}

.fade-enter,
.fade-leave-to {
  transition: opacity 0.1s;
}

.insure__red {
  color: red;
}

.insure__green {
  color: green;
}

.insure__policyHolderType {
  font-size: 12px;
  color: #7f7f7f;
}

.insure__middle {
  display: initial;
  vertical-align: super;
}

.insure__input {
  font-size: 14px;
  color: #7f7f7f !important;
  .weui-cell__ft {
    text-align: justify;
    color: #999999;
  }
}

.weui-label {
  font-size: 14px;
  color: #7f7f7f;
}

input::-webkit-input-placeholder {
  font-size: 14px;
  color: #7f7f7f;
}

.insure__img {
  width: 12px;
  vertical-align: middle;
}

.insure__sure {
  vertical-align: middle;
}

.insure__protocol {
  vertical-align: middle;
  color: #c8161d;
}

.insure__radio {
  display: inline-flex;
}

.insure__input--Bene {
  color: #000;
}

.insure__iconspan--delete {
  font-size: 12px;
  color: rgb(163, 163, 163);
  border: 1px solid rgb(222, 222, 222);
  padding: 2px;
}

.insure__base--padding {
  padding-bottom: 20px;
}

.insure__clauseRead {
  border-color: aliceblue;
  white-space: pre-wrap;
  vertical-align: top;
  width: 100%;
  font-size: 15px;
  height: 75vh;
  font-family: Microsoft YaHei;
  overflow-y: scroll;
  border: 1px solid #f3f3f3;
}

.dialog-Einv {
  // padding: 15px !important;
  .weui-dialog {
    max-width: 90% !important;
  }
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 1s;
}

.fade-enter,
.fade-leave-to {
  opacity: 0;
}
</style>
